<template>
	<view class="container" :style="{'height': windowHeight + 'px'}">
		<view class="container__header">
			<view class="container__header-destination">
				<uni-combox
					:candidates="drugSupplierList"
					placeholder="请选择供应商"
					v-model="drugSupplier"
					@update:modelValue="update"
				></uni-combox>
			</view>
		</view> 
		<scroll-view class="container__body" :scroll-y="true" >
			<view class="" v-if="wuni_list.length > 0">
				<view class="wuni" v-for="(item,index) in wuni_list" :key="index">
					<view class="wuni-pic-box" v-if="item.savename">
						<view class="wuni-pic" v-for="(v,i) in item.imgList"><image :src="v" mode="" @click="preview(item.imgList,i)"></image></view>
					</view>
					<view class="wuni-no-pic" v-else>
						暂无图片
					</view>
					<view class="wuni_date">
						<text class="wuni-label">称重日期：</text>
						<text class="wuni-value">{{item.mydate}}</text>
					</view>
					<view class="wuni_weight">
						<text class="wuni-label">称重重量：</text>
						<text class="wuni-value">{{item.pnum}}{{item.punit}}</text>
					</view>
					<view class="wuni_type">
						<text class="wuni-label">称重类型：</text>
						<uni-data-checkbox
							v-model="item.type" 
							:localdata="range">
						</uni-data-checkbox>
					</view>
					<view class="confirm">
						<button :type="item.savename ? 'primary' : 'warn'" @click="add(item)">+</button>
					</view>
				</view>
			</view>
			<view class="no-data" v-else>
				暂无数据
			</view>
		</scroll-view>
		<view class="select-box">
			<view class="select-box-item1">
				<view class="select-box__left">已选择：</view>
				<view class="select-box__center">
					<view class="" style="display: flex;">
						<view class="select-box__center-item" v-for="item in selectList">
							<view class="select-box__center-item-icon" @click="deleteSelect(item)">
								<image src="@/static/theme/default/home/henggang.png" mode=""></image>
							</view>
							<view class="" v-if="item.type == 1">皮重</view>
							<view class="" v-else-if="item.type == 2">毛重</view>
							<view class="">{{item.pnum}}{{item.punit}}</view>
						</view>
					</view>
					<view class="select-box__center-item" v-if="num">
						<view class="">净重</view>
						<view class="">{{num}}{{unit}}</view>
					</view>
				</view>
				<view class="select-box__right" hover-class="clickable">
					<uni-icons type="loop" size="30" @click="refresh"></uni-icons>
				</view>
			</view>
			<view class="select-box-item2">
				<view class="select-box-item2-left">
					<button class="select-box__right--btn" @click="init">重置</button>
				</view>
				<view class="select-box-item2-right">
					<button class="select-box__right--btn" @click="confirm">确定</button>
				</view>
			</view>
		</view>
		
		<u-popup :show="popVisible" @close="popVisible = false" @open="popVisible = true;">
			<view class="pop">
				<view class="pop-item" @click="goPage(1)">称重补录</view>
				<view class="pop-item" @click="goPage(2)">历史补录</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import moment from 'moment'
	import { formatImgList } from '@/common/custom_util.js'
	
	export default {
		components:{
			
		},
		data() {
			return {
				obsdate: moment().format('YYYY-MM-DD'),
				obscode: _data.localData('obscode'),
				drugCar: {},
				wuni_list: [],
				drugSupplierList: [],
				drugSupplierListTotal: [],
				drugSupplier: '',
				currentSupplier: {},
				range: [{"value": '1',"text": "皮重"},{"value": '2',"text": "毛重"}],
				selectList: [],
				isDelete: false,
				num: 0,
				unit: '',
				popVisible: false
			}
		},
		onLoad() {
			let that = this;
			uni.$on('destination_list',function(data){
				that.destination_list = [];
				data.forEach(item => {
					that.destination_list.push(item.aname)
				})
			});
			uni.$on('confirm',function(data){
				that.getWuniList()
				that.getWuNiSendingData()
			});
			uni.$on('wuni_confirm_data',function(data){
				if(data[0].id) {
					uni.reLaunch({
						url: '../confirm/index?data=' + JSON.stringify(data)
					})
				}
			});
		},
		onUnload() {
			uni.$off('destination_list');
			uni.$off('confirm');
			uni.$off('wuni_confirm_data');
		},
		computed: {
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight
			}
		},
		onShow() {
			this.getDrugCar().then(res => {
				if(!res.length) {
					uni.showToast({
						title: '请联系管理员配置药剂虚拟车牌',
						icon: 'error'
					})
					uni.navigateBack();
					return
				}
				this.drugCar = res[0];
				this.getWuNiSendingData()
			})
			this.getWuniList()
			this.getDrugSupplierList();
		},
		onPullDownRefresh() {
			this.refresh()
		},
		onNavigationBarButtonTap(e) {
			switch(e.index) {
				case 0:
					this.popVisible = true;
					break;
				case 1:
					uni.navigateTo({
						url: './data'
					})
					break;
			}
		},
		watch: {
			selectList() {
				if(this.selectList.length == 2) {
					let pi;
					let mao;
					this.selectList.forEach(item => {
						if(item.type == '1') {
							pi = item.pnum * 1
						} else if(item.type == '2') {
							mao = item.pnum * 1
							this.unit = item.punit
						}
					})
					this.num = mao - pi;
				} else {
					this.num = 0;
				}
			}
		},
		methods: {
			goPage(value) {
				let path = '';
				switch(value) {
					case 1:
						path = './add';
						break;
					case 2:
						path = './add-history';
						break;
				}
				this.popVisible = false;
				uni.navigateTo({
					url: path
				})
			},
			refresh() {
				uni.showLoading({
					title: '刷新中'
				})
				this.selectList = []
				this.drugSupplier = ''
				this.getDrugCar().then(res => {
					if(!res.length) return
					this.drugCar = res[0];
					this.getWuNiSendingData()
				})
				this.getWuniList()
			},
			preview(v,i) {
				uni.previewImage({
					current: i,
					urls: [...v]
				})
			},
			getDrugCar() {
				let that = this;
				return _custom.getDataJava({
					apiname: 'getDrugCar',
					code: 1,
				})
			},
			getWuNiSendingData() {
				_custom.getDataJava({
					apiname: 'getWuNiSendingData',
					code: 1,
					apiparam: {
						obsdate: this.obsdate,
						obscode: this.obscode,
						carcode: this.drugCar.myid
					}
				})
			},
			/**
			 * 获取供应商
			 */
			getDrugSupplierList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getDrugSupplierList',
					success(res) {
						that.drugSupplierListTotal = res;
						that.drugSupplierList = res.map(item => {
							return item.aname
						})
					}
				})
			},
			getWuniList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getWuNiToConfirmList',
					apiparam: {
						obsdate: this.obsdate,
					},
					success(data) {
						if(data.length > 0 && Object.keys(data[0]).length > 0) {
							data.forEach(item => {
								item.imgList = formatImgList(item.savename)
							})
							that.wuni_list = data;
						} else {
							that.wuni_list = []
						}
						uni.stopPullDownRefresh()
						setTimeout(() => {
							uni.hideLoading();
						},1000)
					}
				})
			},
			update(v) {
				this.drugSupplierListTotal.forEach(item => {
					if(item.aname == v) {
						this.currentSupplier = item;
					}
				})
			},
			add(v) {
				let data = JSON.parse(JSON.stringify(v))
				if(v.type == '0') {
					uni.showToast({
						title: '请选择毛重或皮重',
						icon: 'none'
					})
					return
				}
				if(this.selectList.length < 3) {
					let flag = false;
					for (let i = 0; i < this.selectList.length; i++) {
						let item = this.selectList[i]
						if(item.id == data.id) {
							this.selectList.splice(i,1)
							break;
						}
						if(item.type == data.type && data.type == '1') {
							uni.showToast({
								title: '皮重已选',
								icon: 'none'
							})
							flag = true;
							break;
						} else if(item.type == data.type && data.type == '2') {
							uni.showToast({
								title: '毛重已选',
								icon: 'none'
							})
							flag = true;
							break;
						}
					}
					if(!flag) {
						this.selectList.push(data)
					}
				} else {
					uni.showToast({
						title: '只能选择一皮一毛',
						icon: 'none'
					})
				}
			},
			deleteSelect(v) {
				this.selectList.forEach((item,index) => {
					if(item.id == v.id) {
						this.selectList.splice(index,1)
					}
				})
			},
			init() {
				this.selectList = []
			},
			confirm(v) {
				let that = this;
				if(that.drugSupplier == '') {
					uni.showToast({
						title: '请选择供应商',
						icon: 'none'
					})
					return
				}
				if(this.selectList.length != 2) {
					uni.showToast({
						title: '请选择一皮一毛',
						icon: 'error'
					})
					return
				}
				if(this.num < 0) {
					uni.showToast({
						title: '净重不能为负',
						icon: 'error'
					})
					return
				}
				let pi = '';
				let mao = '';
				this.selectList.forEach(item => {
					if(item.type == '1') {
						pi = item.pnum;
					}
					if(item.type == '2') {
						mao = item.pnum;
					}
				})
				let content = `
供应商：${this.currentSupplier.aname}
药剂：${this.currentSupplier.drug}
毛重：${mao}kg
皮重：${pi}kg
净重：${mao - pi}kg
`
				uni.showModal({
					title: '确定提交以下数据吗?',
					content,
					success(res) {
						if(res.confirm) {
							that.selectList.forEach(item => {
								if(item.type == '1') {
									_custom.getDataJava({
										apiname: 'confirmDrugPiData',
										code: 2,
										apiparam: {
											"pbz": item.pbz,
											"destination": that.drugSupplier,
											"flag": item.type,
											"carcode": that.drugCar.myid
										},
										success() {
											that.selectList.forEach(v => {
												if(v.type == '2') {
													_custom.getDataJava({
														apiname: 'confirmDrugData',
														code: 2,
														apiparam: {
															"pbz": v.pbz,
															"destination": that.drugSupplier,
															"flag": '2',
															"carcode": that.drugCar.myid,
															"bindbz": item.pbz
														},
														success() {
															uni.showToast({
																title: '确认成功',
																icon: 'success'
															})
															that.refresh()
														}
													})
												}
											})
										}
									})
								}
							})
						}
					}
				})
				
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
		font-size: 14px;
		line-height: 24px;
		overflow: hidden;
		box-sizing: border-box;
	}
	
	.container__header {
		width: 100%;
		height: 140rpx;
		margin-bottom: 20rpx;
	}
	
	.container__body {
		height: calc(100% - 340rpx);
		overflow-y: scroll;
	}
	
	.container__header-carcode {
		text-align: center;
		margin-bottom: 10rpx;
	}
	
	.wuni {
		margin: 20rpx 0;
		position: relative;
		border-bottom: 1rpx solid #eee;
	}
	
	.wuni-pic-box {
		width: 700rpx;
		height: 300rpx;
		overflow-x: scroll;
		overflow-y: hidden;
		display: flex;
		flex-wrap: nowrap;
	}
	
	.wuni-pic {
		width: 500rpx;
		height: 100%;
		margin-right: 20rpx;
	}
	
	.wuni-pic > image {
		width: 500rpx;
		height: 100%;
	}
	
	.wuni-no-pic {
		width: 100%;
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		background-color: #8792a2;
		border-radius: 10rpx;
	}
	
	.wuni_date,.wuni_weight,.wuni_type {
		padding-left: 10rpx;
		margin: 25rpx;
	}
	
	.wuni_type {
		display: flex;
	}
	
	.confirm {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		bottom: 10rpx;
		right: 50rpx;
		background-color: transparent;
	}
	
	.confirm > button {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		font-size: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 0 20rpx 3rpx rgba(0, 0, 0, .3);
	}
	
	.confirm > button::after {
		border-width: 0;
	}
	
	.no-data {
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.clickable {
		background-color: rgba(0,0,0,.1);
	}
	
	.select-box {
		position: fixed;
		width: 100%;
		height: 200rpx;
		bottom: 0;
		/* #ifdef H5 */
		bottom: 100rpx;
		/* #endif */
		left: 0;
		background-color: #fff;
		border-top: 1rpx solid #eee;
	}
	
	.select-box-item1 {
		height: 100rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.select-box-item2 {
		height: 100rpx;
		display: flex;
	}
	
	.select-box-item2-left {
		flex: 1;
		margin: 0 10rpx;
	}
	
	.select-box-item2-right {
		flex: 4;
		margin-right: 10rpx;
	}
	
	.select-box-item2-left > button,.select-box-item2-right > button {
		width: 100%;
		height: 100%;
		background-color: #3C9CFF;
		color: #fff;
		font-size: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.select-box-item2-left > button {
		background-color: #F9AE3D;
	}
	
	.select-box__left {
		width: 120rpx;
		font-size: 25rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.select-box__center {
		width: calc(100% - 200rpx);
		display: flex;
		justify-content: space-between;
	}
	
	.select-box__right {
		width: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}
	
	.select-box__center-item {
		padding: 5rpx 10rpx;
		height: 80rpx;
		background-color: #3C9CFF;
		border-radius: 10rpx;
		font-size: 25rpx;
		box-sizing: border-box;
		text-align: center;
		color: #fff;
		margin-right: 20rpx;
		position: relative;
	}
	
	.select-box__center-item-icon {
		position: absolute;
		width: 30rpx;
		height: 30rpx !important;
		top: -10rpx;
		right: -15rpx;
		z-index: 99999;
	}
	
	.select-box__center-item-icon > image {
		width: 100%;
		height: 100%;
	}
	
	.select-box__center-item > view {
		height: 50%;
	}
	
	.pop-item {
		padding: 30rpx 0;
		padding-left: 20rpx;
		cursor: pointer;
	}
	
	.pop-item:hover {
		background-color: rgba(139, 139, 139, 0.1);
	}
</style>
